<template>
  <div class="welfare-container">
    <k-header headTitle="福利社" goBack="" rightTitle="" @rightClick=""></k-header>
    <div :class="isIos?'place-ios':'place'"></div>
    <div class="welfare-center" >
      <!--<a href="http://luobolieshou.com/lblsapp-service/lbls/app/route/wishForHouse.html">-->
        <!--<div class="welfare-list one" @click="goDetail('萝卜找房','http://wx.innjia.com/h5v2/ghy/work/index.html?from=singlemessage&isappinstalled=0')">-->
            <!--<p>萝卜找房</p>-->
            <!--<span>招人不易,用房把他留下</span>-->
        <!--</div>-->
      <!--</a>-->
      <!--<a href="http://luobolieshou.com/lblsapp-service/lbls/app/h5/saveSocialSecurity.html">-->
        <div class="welfare-list two" @click="goDetail('萝卜社保','http://luobolieshou.com/lblsapp-service/lbls/app/h5/saveSocialSecurity.html')">
          <p>萝卜社保</p>
          <span>200余座城市,社保代缴一键完成</span>
        </div>
      <!--</a>-->
      <!--<div class="welfare-list-new" v-for="item in oData">-->
        <!--<img src="./../../assets/img/welfare/seaHome.png" alt="">-->
        <!--<p>{{item.header}}</p>-->
        <!--<span>{{item.oInfo}}</span>-->
      <!--</div>-->
      <!--<a href="javascript:;">-->
        <!--<div class="welfare-list three">-->
          <!--<p>萝卜下午茶</p>-->
          <!--<span>一键下单,优惠多多</span>-->
        <!--</div>-->
      <!--</a>-->
      <!--<a href="javascript:;">-->
        <!--<div class="welfare-list fore">-->
          <!--<p>萝卜周边游</p>-->
          <!--<span>一键下单，优惠多多</span>-->
        <!--</div>-->
      <!--</a>-->

    </div>
  </div>
</template>

<script>
  import kHeader from '../common/head'
  export default {
    name: 'welfare',
    data () {
      return {
        isIos:false,
        oData:[
          {header:'萝卜找房',oInfo:'招人不易,用房把他留下',oSrc:'./../../assets/img/welfare/seaHome.png',oHttp:'http://luobolieshou.com/lblsapp-service/lbls/app/route/wishForHouse.html'},
          {header:'萝卜社保',oInfo:'200余座城市,社保代缴一键完成',oSrc:'./../../assets/img/welfare/social.png',oHttp:'http://luobolieshou.com/lblsapp-service/lbls/app/h5/saveSocialSecurity.html'},
        ]
      }
    },
    created(){
      if (window.navigator.userAgent.indexOf('LBLSIOS') > -1){
        this.isIos = true
      }else {
        this.isIos = false
      }
    },
    components:{
      kHeader
    },
    methods:{
      goDetail(header,oHttp){
        console.info(header,oHttp)
        this.$router.push( {path: 'welfareDetail', query: {header:header,oHttp:oHttp}})
      }
    }

  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .welfare-container{
    width:100%;
    height: 100%;
    overflow-y: hidden;
    background-color: rgb(245,245,245);
  }
  .place{
    background: white;
    height:46px;
  }
  .place-ios{
    background: white;
    height:66px;
  }
  .welfare-center{
    width:100%;
    height: 100%;
  }
  /*新样式*/
  .welfare-center .welfare-list-new{
    width:92%;
    height:19%;
    margin: 15px auto;
    position: relative;
  }
  .welfare-center .welfare-list-new img{
    width: 100%;
    height: 100%;
    position: absolute;
    top:0;
    left:0;
  }
  .welfare-center .welfare-list-new p{
    position: relative;
    z-index: 10;
    text-align: center;
    font-size: 2.4rem;
    color: #FFFFFF;
    letter-spacing: 0;
    padding-top: 5%;
  }
  .welfare-center .welfare-list-new span{
    position: relative;
    z-index: 10;
    display: block;
    text-align: center;
    font-size: 1.2rem;
    color: #FFFFFF;
    letter-spacing: 0;
    padding-top: 5%;
  }
  /*新样式*/


  .welfare-center .welfare-list{
    width:92%;
    height:19%;
    /*background-color: pink;*/
    margin: 15px auto;
  }
  .welfare-center .welfare-list p{
    text-align: center;
    font-size: 2.4rem;
    color: #FFFFFF;
    letter-spacing: 0;
    padding-top: 5%;
  }
  .welfare-center .welfare-list span{
    display: block;
    text-align: center;
    font-size: 1.2rem;
    color: #FFFFFF;
    letter-spacing: 0;
    padding-top: 5%;
  }
  .one{
    background-image: url("./../../assets/img/welfare/seaHome.png");
    background-size: 100%;
  }
  .two{
    background-image: url("./../../assets/img/welfare/social.png");
    background-size: 100%;
  }
  .three{
    background-image: url("./../../assets/img/welfare/tea.png");
    background-size: 100%;
  }
  .fore{
    background-image: url("./../../assets/img/welfare/holiday.png");
    background-size: 100%;
  }
</style>
